<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCateDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 ：使用新的插件依赖--> 
            <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" 
                :expand-type="false" show-index border :show-row-hover="false"
            >
            <!-- 1 是否有效 -->
            <template slot="isok" slot-scope="scope">
                <!-- 按需渲染 -->
                <i class="el-icon-success" v-if="scope.row.cat_deleted === false"
                    style="color:lightgreen"
                >
                </i>
                <i class="el-icon-error" style="color:red" v-else></i>
            </template>
            <!-- 2 排序 -->
            <template slot="order" slot-scope="scope">
                <!-- 按需渲染 -->
                <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
                <el-tag size="mini" v-else-if="scope.row.cat_level === 1" type="success">二级</el-tag>
                <el-tag size="mini" v-else type="warning">三级</el-tag>
            </template>
            <!-- 3 操作 -->
            <template slot="opt" slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit"  @click="showEditCateDialog(scope.row.cat_id)">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="removeCateById(scope.row.cat_id)">删除</el-button>
            </template>
            </tree-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="querInfo.pagenum"
                :page-sizes="[3,5,10,15]"
                :page-size="querInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>

        <!-- 添加分类对话框 -->
        <el-dialog
            title="添加分类"
            :visible.sync="addCateDialogVisible"
            width="50%" @close="addCateDialogClosed"
        >
            <!-- 添加分类的表单 -->
            <el-form :model="addCateForm" :rules="cateFormRules" ref="addCateFormRef" 
                label-width="100px"
            >
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类：">
                    <!-- options用于指定数据源 -->
                    <el-cascader
                        v-model="selectedKeys" :options="parentCateList" :props="cascaderProps"
                        @change="parentCateChanged" clearable
                    >
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改分类对话框 -->
         <el-dialog
            title="修改分类"
            :visible.sync="editCateDialogVisible"
            width="50%"
            @close="editCateDialogClosed"
        >
        <el-form :model="editCateForm" :rules="cateFormRules"
         ref="editCateFormRef" label-width="80px"
        >
            <el-form-item label="分类名称" prop="cat_name">
                <el-input v-model="editCateForm.cat_name" ></el-input>
            </el-form-item> 
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCateInfo">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name:"Categories",
        data() {            
            return {
                // 查询参数配置
                querInfo: {
                    type:3,
                    pagenum:1,
                    pagesize:5
                },
                // 商品分类的数据列表，默认为空
                catelist:[],
                // 总数据条数
                total:0,
                // 为table指定列的定义
                columns:[
                    {
                        label:"分类名称",
                        prop:"cat_name",  
                    },
                    {
                        label:"是否有效",
                        // 表示是否将当前列定义为模板列
                        type:"template",
                        // 表示当前这一列使用的模板名称
                        template:"isok"
                    }, 
                    {
                        label:"排序",
                        type:"template",
                        template:"order"
                    },
                    {
                        label:"操作",
                        type:"template",
                        template:"opt"
                    }
                ],
                // 控制添加分类对话框的显示与隐藏
                addCateDialogVisible:false,
                // 添加分类的表单数据对象
                addCateForm:{
                    // 将要添加的分类的名称
                    cat_name:"",
                    // 父级分类的id
                    cat_pid :0,
                    // 分类的等级 默认一级
                    cat_level :0
                },
                // 分类表单规则对象
                cateFormRules:{
                    cat_name:[
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                    ],
                },
                // 父级分类数据列表
                parentCateList:[],
                // 指定级联选择器的配置对象
                cascaderProps:{
                    // 子级菜单打开模式
                    expandTrigger: "hover" ,
                    value:"cat_id",
                    label:"cat_name",
                    children:"children",
                    checkStrictly:true
                },
                // 选中的父级分类的id数组
                selectedKeys:[],
                // 控制修改分类对话框的显示与隐藏
                editCateDialogVisible:false,
                // 查询到的分类对象
                editCateForm:{}
            } 
        },
        created() {
            // 获取商品分类数据列表
            this.getCateList();
        },
        methods: {
            // 获取商品分类数据
            async getCateList() {
            const {data:res} =  await this.$http.get("categories",{
                params:this.querInfo
            });
            if (res.meta.status !== 200) return this.$message.error("获取商品分类数据失败！");
            // 把数据列表赋值给catalist
            this.catelist = res.data.result;
            // 为总数据条数赋值
            this.total = res.data.total
            },
            // 监听pagesize改变的事件
            handleSizeChange(newSize) {
                this.querInfo.pagesize = newSize;
                // 刷新数据
                this.getCateList();
            },
            // 监听pagenum改变的事件
            handleCurrentChange(newPage) {
                this.querInfo.pagenum = newPage;
                this.getCateList();
            },
            // 点击按钮展示添加分类的对话框
            showAddCateDialog() {
                // 获取父级分类的数据列表
                this.getParentCateList();
                this.addCateDialogVisible = true;
            },
            // 获取父级分类的数据列表
            async getParentCateList() {
                const {data:res} = await this.$http.get("categories",{
                    params:{ type:2}
                });
                if(res.meta.status !== 200) return this.$message.error("获取父级分类数据失败！");
                this.parentCateList = res.data;
            },
            // 选择项发生改变时触发
            parentCateChanged() {
                // 如果 selectedKeys 数组中的 length 大于0，证明选中了父级分类 
                // 当前父级分类总是保存在 selectedKeys 数组中的最后一项
                let len = this.selectedKeys.length;
                if(len > 0) {
                    // 更新父级分类的id
                    this.addCateForm.cat_pid = this.selectedKeys[len-1];
                    // 更新分类的等级
                    this.addCateForm.cat_level = len;
                    return
                } else {
                    this.addCateForm.cat_pid = 0;
                    this.addCateForm.cat_level = 0;
                }
            },
            // 点击按钮，预验证并添加新的分类
            addCate() {
                this.$refs.addCateFormRef.validate( async valid=> {
                    // 判断验证结果
                    if(!valid) return; 
                    // 发起请求
                    const {data:res} = await this.$http.post("categories",this.addCateForm);
                    if(res.meta.status !== 201) return this.$message.error("添加分类失败！")
                    this.$message.success("添加分类成功！")
                    // 刷新数据列表
                    this.getCateList()
                    // 隐藏对话框
                    this.addCateDialogVisible = false;
                });
                
            },
            // 监听添加分类对话框的关闭事件：重置表单数据 
            addCateDialogClosed() {
                this.$refs.addCateFormRef.resetFields()
                // 将父级分类的数据也清空
                this.selectedKeys = [];
                this.addCateForm.cat_pid = 0;
                this.addCateForm.cat_level = 0;
            },
            // 展示编辑分类的对话框
            async showEditCateDialog(id) {
                // 发送请求
                console.log(id);
                const {data:res} = await this.$http.get("categories/" + id);
                if(res.meta.status !== 200) return this.$message.error("查询分类信息失败！");
                this.editCateForm = res.data;
                this.editCateDialogVisible = true;
            },
            // 修改分类信息，验证并提交
            editCateInfo() {
                // 表单预验证
                this.$refs.editCateFormRef.validate(async valid=> {
                    if(!valid) return;
                    // 发起请求
                    const {data:res} = await this.$http.put("categories/" + this.editCateForm.cat_id,{
                        cat_name : this.editCateForm.cat_name
                    });
                    if(res.meta.status !== 200) {
                        this.$message.error("修改分类信息失败！");
                    }
                    this.$message.success("修改分类信息成功！");
                    // 刷新数据列表
                    this.getCateList();
                    // 关闭对话框
                    this.editCateDialogVisible =false;
                })

            },
            // 监听修改分类对话框的关闭事件：重置表单数据 
            editCateDialogClosed() {
                this.$refs.editCateFormRef.resetFields();
                this.editCateForm=[];
            },

            // 根据id删除对应的分类
            async removeCateById(id) {
                // 询问用户
                const confirmResult = await this.$confirm(`此操作将永久删除该分类，是否继续？`,
                "提示",{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                if(confirmResult != "confirm") return this.$message.info("已取消删除");
                // 发起删除请求
                const {data:res} = await this.$http.delete("categories/" + id);
                if(res.meta.status !== 200) return this.$message.error("删除分类失败！");
                // 刷新数据列表
                this.getCateList();
                // 提示删除成功！
                this.$message.success("删除分类成功！");
            }
        },
    }
</script>

<style lang="less" scoped>
    .treeTable {
        margin-top: 15px;
    }
    .el-cascader {
        width: 100%;
    }
</style>